<template>
  <div>

    <van-cell title="搜索历史">
      <van-icon v-if="!isDel" name="delete-o"
        @click="isDel=true" />
      <template v-else>
        <!-- <span @click="history.splice(0)">
          全部删除
        </span> -->
        <span @click="$emit('clearHistory')">
          全部删除
        </span>
        <span style="margin-left:10px;"
          @click="isDel=false">完成</span>
      </template>
    </van-cell>
    <van-cell :title="item"
      @click="delAndSearch(index, item)"
      v-for="(item,index) in history" :key="item">
      <van-icon name="close" v-if="isDel" />
    </van-cell>

    <!-- 网络错误 -->
    <van-empty v-if="!history.length"
      image="error" description="暂无搜索历史" />

  </div>
</template>

<script>
export default {
  data () {
    return {
      isDel: false
    }
  },
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  methods: {
    delAndSearch (index, item) {
      if (this.isDel) {
        this.history.splice(index, 1)
      } else {
        this.$emit('search', item)
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
</style>
